<template>
  <div class="iphonedetails">
    <div class="iphonedetailstile">
      <div class="left">iPhone 12</div>
      <div class="right">RMD 387/月或RMB 9299</div>
    </div>
    <div class="quifen">
      <!-- 机型图片展示div -->
      <div class="domain">
        <img
          src="@/components/iPhone/imgs/iphone-12-pro-graphite-hero.png"
          alt=""
        />
        <span class="one">免费送货</span>
        <span class="tou">简单免费退货服务</span>
      </div>
      <!-- 详情配置展示div -->
      <div class="shoose">
        <div class="xkuan">新款</div>
        <div class="gm">购买 iPhone 12</div>
        <div>参加 Apple 折抵换购，可抵高达 RMB 2300*</div>
        <div class="ggao">了解 Apple Tra'de in 换购计划的流程</div>
        <div>选择机型</div>
        <div class="xuanz">那款机型适合你？</div>
        <!-- 机型一号选择 -->
        <div id="button_one" class="button_one" @click="button_one(1)">
          <div class="one">
            <div>iPhone 12</div>
            <div>6.1英寸显示屏</div>
          </div>
          <div class="tou">
            <div>RMB 354/月</div>
            <div>RMB 8499 起</div>
          </div>
        </div>
        <!-- 机型二号选择 -->
        <div id="button_tou" @click="button_one(2)" class="button_tou">
          <div class="one">
            <div>iPhone 12</div>
            <div>6.1英寸显示屏</div>
          </div>
          <div class="tou">
            <div>RMB 354/月</div>
            <div>RMB 8499 起</div>
          </div>
        </div>
        <br />
        <hr />
        <!-- 外观颜色显示区 -->
        <div class="waiguan_xuanze">
          <span>选择外观</span>
          <div class="one" @click="yanshe(1)" id="yanshe1">
            <div></div>
            <span>石墨色</span>
          </div>
          <div class="tou" @click="yanshe(2)" id="yanshe2">
            <div></div>
            <span>银色</span>
          </div>
          <div class="three" @click="yanshe(3)" id="yanshe3">
            <div></div>
            <span>金色</span>
          </div>
          <div class="four" @click="yanshe(4)" id="yanshe4">
            <div></div>
            <span>海蓝色</span>
          </div>
        </div>
        <!-- 内存选择区 -->
        <div class="neic_xuanz">
          <span>选择内存容量</span>
          <span>多大的容量适合你</span>
          <br />
          <div class="neic_one" @click="neic_xuanz(1)" id="neic_one">
            <p class="title">128GB<sup>2</sup></p>
            <p class="xianshi">RMB354/月或</p>
            <p class="xianshi">8499</p>
          </div>
          <div class="neic_tou" @click="neic_xuanz(2)" id="neic_tou">
            <p class="title">256GB<sup>2</sup></p>
            <p class="xianshi">RMB387/月或</p>
            <p class="xianshi">9299</p>
          </div>
          <div class="neic_three" @click="neic_xuanz(3)" id="neic_three">
            <p class="title">512GB<sup>2</sup></p>
            <p class="xianshi">RMB462/月或</p>
            <p class="xianshi">12099</p>
          </div>
        </div>
        <!-- 包装内容展示区 -->
        <div class="jia'g_zhanshi">
          <span>RMB 387/月或RMb</span>
          <span>9299</span>
          <div>含增值税及其他法定税费：约 RMB1,076¥</div>
          <div>24期 0% 费率,每月仅约 RMB 387</div>
        </div>
        <br />
        <hr />
        <div class="guowuche_zhanshi">
          <button @click="tianjia(1)">{{tjia}}</button>
        </div>
      </div>
      <!-- 配套内容展示div -->
    </div>
    <div class="neir_zhanshi">
      <p>包装内容</p>
      <div>
        <img src="@/components/iPhone/imgs/compare_iphone_11.jpg" alt="" />
        <img
          src="@/components/iPhone/imgs/compare_iphone_11_proshu.jpg"
          alt=""
        />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "iphoneDetails",
  data(){
    return{
      tjia:"添加购物车"
    }
  },
  methods: {
    //机型选择方法
    button_one: function (e) {
      if (e === 1) {
        document.getElementById("button_one").style.border =
          " 1px solid rgb(61, 90, 250)";
        document.getElementById("button_tou").style.border =
          " 1px solid rgb(199, 199, 199)";
      } else {
        document.getElementById("button_tou").style.border =
          " 1px solid rgb(61, 90, 250)";
        document.getElementById("button_one").style.border =
          " 1px solid rgb(199, 199, 199)";
      }
    },
    //颜色选择事件
    yanshe: function (e) {
      if (e === 1) {
        document.getElementById("yanshe1").style.border =
          " 1px solid rgb(61, 90, 250)";
        document.getElementById("yanshe2").style.border =
          " 1px solid rgb(199, 199, 199)";
        document.getElementById("yanshe3").style.border =
          " 1px solid rgb(199, 199, 199)";
        document.getElementById("yanshe4").style.border =
          " 1px solid rgb(199, 199, 199)";
      }
      if (e === 2) {
        document.getElementById("yanshe2").style.border =
          " 1px solid rgb(61, 90, 250)";
        document.getElementById("yanshe1").style.border =
          " 1px solid rgb(199, 199, 199)";
        document.getElementById("yanshe3").style.border =
          " 1px solid rgb(199, 199, 199)";
        document.getElementById("yanshe4").style.border =
          " 1px solid rgb(199, 199, 199)";
      }
      if (e === 3) {
        document.getElementById("yanshe3").style.border =
          " 1px solid rgb(61, 90, 250)";
        document.getElementById("yanshe2").style.border =
          " 1px solid rgb(199, 199, 199)";
        document.getElementById("yanshe1").style.border =
          " 1px solid rgb(199, 199, 199)";
        document.getElementById("yanshe4").style.border =
          " 1px solid rgb(199, 199, 199)";
      }
      if (e === 4) {
        document.getElementById("yanshe4").style.border =
          " 1px solid rgb(61, 90, 250)";
        document.getElementById("yanshe2").style.border =
          " 1px solid rgb(199, 199, 199)";
        document.getElementById("yanshe3").style.border =
          " 1px solid rgb(199, 199, 199)";
        document.getElementById("yanshe1").style.border =
          " 1px solid rgb(199, 199, 199)";
      }
    },
    // 内存选择事件方法
    neic_xuanz: function (e) {
      if (e === 1) {
        document.getElementById("neic_one").style.border =
          " 1px solid rgb(61, 90, 250)";
        document.getElementById("neic_tou").style.border =
          " 1px solid rgb(199, 199, 199)";
        document.getElementById("neic_three").style.border =
          " 1px solid rgb(199, 199, 199)";
      }
      if (e === 2) {
        document.getElementById("neic_tou").style.border =
          " 1px solid rgb(61, 90, 250)";
        document.getElementById("neic_one").style.border =
          " 1px solid rgb(199, 199, 199)";
        document.getElementById("neic_three").style.border =
          " 1px solid rgb(199, 199, 199)";
      }
      if (e === 3) {
        document.getElementById("neic_three").style.border =
          " 1px solid rgb(61, 90, 250)";
        document.getElementById("neic_tou").style.border =
          " 1px solid rgb(199, 199, 199)";
        document.getElementById("neic_one").style.border =
          " 1px solid rgb(199, 199, 199)";
      }
    },
    //添加购物车的方法
    tianjia:function() {
      this.$router.push('/shopping');
    },
    //通过id获取共有数据的下标的方法
    toindex:function(e){
      // var index = this.$store.id.findindex(e)
      console.log(e);
    },
  },
  // 页面跳转开始
  mounted() {
    this.toindex()
  },
};
</script>
<style scoped lang="less">
.iphonedetails {
  //头
  .iphonedetailstile {
    display: block;
    background-color: rgb(255, 255, 255);
    height: 40px;
    float: left;
    .left {
      line-height: 40px;
      float: left;
      font-size: 20px;
      text-align: left;
      padding-left: 20px;
      font-weight: bold;
    }
    .right {
      line-height: 40px;
      float: left;
      font-size: 10px;
      text-align: left;
      padding-left: 500px;
      font-weight: bold;
    }
  }
  //详情左边显示样式
  .quifen {
    display: flex;
    float: left;
    .domain {
      flex: 2;
      width: 50vmax;
      height: 600px;
      background-color: rgb(255, 255, 255);
      img {
        margin: 0 auto;
        width: 450px;
        height: 550px;
      }
      .one {
        padding-left: 20px;
      }
      .tou {
        padding-left: 260px;
      }
    }
    //详情右边显示样式
    .shoose {
      height: 750px;
      width: 25vmax;
      flex: 2;
      overflow: scroll;
      .xkuan {
        color: tomato;
        border-radius: 19px;
      }
      .gm {
        font-size: 30px;
        letter-spacing: 2px;
        padding-top: 6px;
        padding-bottom: 10px;
      }
      .ggao {
        color: rgb(15,120,204);
        padding-bottom: 19px;
      }
      .xuanz {
        color: rgb(15,120,204);
        padding-bottom: 10px;
        padding-top: 10px;
      }
      // 型号选择样式1
      .button_one {
        border-radius: 5px;
        height: 60px;
        display: flex;
        border: 1px solid rgb(229, 230, 225);

        .one {
          padding-top: 10px;
          padding-left: 10px;
          line-height: 20px;
          flex: 2;
        }
        .tou {
          flex: 2;
          line-height: 20px;
          padding-top: 10px;
          padding-left: 120px;
        }
      }
      //型号选择样式2
      .button_tou {
        margin-top: 10px;
        border-radius: 5px;
        height: 60px;
        display: flex;
        border: 1px solid rgb(229, 230, 225);

        .one {
          padding-top: 10px;
          padding-left: 10px;
          line-height: 20px;
          flex: 2;
        }
        .tou {
          flex: 2;
          line-height: 20px;
          padding-top: 10px;
          padding-left: 120px;
        }
      }
      //外观选择样式
      .waiguan_xuanze {
        height: 180px;
        span {
          display: block;
          padding-top: 5px;
          font-size: 15px;
          padding-bottom: 5px;
        }
        .one {
          border-radius: 5px;
          float: left;
          border: 1px solid rgb(229, 230, 225);
          height: 60px;
          width: 150px;
          span {
            text-align: center;
          }
          div {
            margin: 0 auto;
            height: 30px;
            width: 30px;
            border-radius: 50px;
            background-color: rgb(89, 88, 84);
          }
        }
        .tou {
          border-radius: 5px;

          float: right;
          border: 1px solid rgb(229, 230, 225);
          height: 60px;
          width: 150px;
          span {
            text-align: center;
          }
          div {
            margin: 0 auto;
            height: 30px;
            width: 30px;
            border-radius: 50px;
            background-color: rgb(228, 229, 225);
          }
        }
        .three {
          border-radius: 5px;

          margin-top: 10px;
          float: left;
          border: 1px solid rgb(228, 229, 225);
          height: 60px;
          width: 150px;
          span {
            text-align: center;
          }
          div {
            margin: 0 auto;
            height: 30px;
            width: 30px;
            border-radius: 50px;
            background-color: rgb(252, 237, 214);
          }
        }
        .four {
          border-radius: 5px;

          margin-top: 10px;
          float: right;
          border: 1px solid rgb(228, 229, 225);
          height: 60px;
          width: 150px;
          span {
            text-align: center;
          }
          div {
            margin: 0 auto;
            height: 30px;
            width: 30px;
            border-radius: 50px;
            background-color: rgb(51, 83, 96);
          }
        }
      }
      //内存选择样式
      .neic_xuanz {
        height: 200px;
        span {
          text-align: center;
          float: left;
          display: block;
          padding-top: 10px;
          font-size: 15px;
        }
        .neic_one {
          border-radius: 5px;

          border: 1px solid rgb(229, 230, 225);
          margin-top: 30px;
          margin-bottom: 10px;
          margin-left: 0px;
          height: 60px;
          width: 150px;
          .xianshi {
            text-align: center;
            font-size: 5px;
          }
          .title {
            text-align: center;
            font-size: 20px;
          }
        }
        .neic_tou {
          border-radius: 5px;

          float: right;
          border: 1px solid rgb(229, 230, 225);
          height: 60px;
          width: 150px;
          .xianshi {
            text-align: center;
            font-size: 5px;
          }
          .title {
            text-align: center;
            font-size: 20px;
          }
        }
        .neic_three {
          border-radius: 5px;

          float: left;
          border: 1px solid rgb(229, 230, 225);
          height: 60px;
          width: 150px;
          .xianshi {
            text-align: center;
            font-size: 5px;
          }
          .title {
            text-align: center;
            font-size: 20px;
          }
        }
      }
      //包装内容展示区样式
      .jiag_zhanshi {
        height: 100px;
        border: 1px solid red;
      }
      .guowuche_zhanshi {
        margin-top: 30px;
        margin-bottom: 70px;
        button {
          background-color: royalblue;
          background-color: rgb(61, 90, 250);
          height: 30px;
          width: 250px;
          color: snow;
          border: none;
          border-radius: 5px;
          font-size: 15px;
        }
      }
    }
  }
  .neir_zhanshi {
    float: left;
    width: 766px;
    height: 600px;
    p {
      text-align: center;
      font-size: 30px;
      font-weight: bold;
    }
    div {
      img {
        width: 250px;
        height: 400px;
        padding-left: 100px;
      }
    }
  }
}
</style>